<template>
  <div class="container">
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="onSearch"
      bordered
      :rowKey="(record) => record.id"
    >
      <template slot="gallery" slot-scope="text, record">
        <div v-if="text && text.length>0">
          <div  v-viewer>
          <span v-for="item in text">
            <img :src="item?.url" height="50" width="35" class="img" />
          </span>
          </div>
        </div>
        <div v-else>-</div>
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button size="small" type="primary" @click="edit(record)">编辑</a-button>
        <a-button size="small" type="danger" class="ml15" @click="deleteFn(record)">删除</a-button>
      </template>
    </s-table>

    <!--新增删除-->
    <EditAdd :visible="visible" :record="this.record" :type="type" @cancel="cancel" @onOk="onOk" />
  </div>
</template>

<script>
import STable from '@/components/Table'
import { mapGetters } from 'vuex'
import { deleteRequest, getImgList } from '@/api/img-manage'
import store from '@/store'
import { Ellipsis } from '@/components'
import EditAdd from './editAdd.vue'
import { message } from 'ant-design-vue'
import { sitePlace } from '@/views/mapping'

export default {
  name: 'imageConfiguration',
  components: { Ellipsis, STable, EditAdd },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      type: 1, // 1新增，0 编辑
      visible: false,
      record: {}, // 行数据
      // 查询条件参数
      pageNum: 0,
      pageSize: 10,
      total: 0,
      columns: [
        {
          title: '显示位置', dataIndex: 'site', align: 'center', customRender: (text) => {
            return text ? sitePlace[text] : '-'
          }
        },
        { title: '内容', dataIndex: 'gallery', scopedSlots: { customRender: 'gallery' }, align: 'center' },
        { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, align: 'center', width: 220 }
      ]
    }
  },
  methods: {
    // 条件查询列表
    onSearch(parameter) {
      return new Promise((resolve, reject) => {
        getImgList({
          ...parameter,
          userId: store.getters.userInfo?.userId
        }).then(res => {
          if(res.data.records && res.data.records.length) {
            res.data.records.map(item => {
              if(item.gallery) {
                item.gallery = item.gallery.sort((a,b) => a.sort - b.sort)
              }
            })
          }
          resolve(res.data)
        }).catch((err) => {
          console.log(err, 'err')
          // reject(err)
        })
      })
    },
    onOk(bo) {
      this.visible = false
      this.record = {}
      this.refresh(bo !== 'edit')
    },
    cancel() {
      this.visible = false
      this.record = {}
    },
    insert() {
      this.visible = true
      this.type = true
    },
    edit(item) {
      this.visible = true
      this.type = false
      this.record = item
    },
    refresh(boo) {
      this.$refs.table.refresh(boo)
    },
    deleteFn(row) {
      const _this = this
      this.$confirm({
        content: '请确认是否删除？',
        onOk() {
          deleteRequest({
            id: row.id,
            userId: store.getters.userInfo?.userId,
            uuid: row.uuid
          }).then(res => {
            if (res.code === 200) {
              _this.refresh(true)
              message.success('操作成功')
            }
          })
        }
      })
    },
    onchange(data) {
      this.queryParam.review = data.key
    },
    search() {
      this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
    }
  }
}
</script>
<style lang="less" scoped>
.img {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 4px;
  cursor: pointer;

  &:hover {
    transform: scale(1.1);
    transition: all 1s;
  }
}
</style>
